<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <!-- <img src="images/player_title.png" alt="" /> -->
		<span style="margin-left: 20px;font-size: x-large;color: #F1F3F4;">{{username}}</span>
		<button @click="showlikes(0)">我的收藏</button>
        <!-- 搜索歌曲 -->
        <input type="text" placeholder="搜索歌曲" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
		<a href="javascript:;" style="margin-right: 20px;font-size: larger;color: #F1F3F4;" @click="quit()">退出</a>
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='song_wrapper'>
          <ul class="song_list">
			<b class="back" v-if="isLikeList == 1" @click="back()"></b>
			<li class="like" v-if="isLikeList == 1" >我的收藏</li>
			<li class="like" v-if="isLikeList == 0" >搜索结果</li>
            <li v-for="(item,index) in musicList">
              <!-- 点击放歌 -->
              <a href="javascript:;" @click='playMusic(item.id,item.name,item.mvid,index)'></a>
              <b>{{item.name}}</b>
              <span>
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
              </span>
            </li>

          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
		  <!-- 当前播放 -->
		  <div class="play_now">
			  <span>{{nowPlay}}</span>
		  </div>
		  <div class="play_now1">
			  <span>{{singer}}</span>
		  </div>
		  <div class="play_now2">
			  <a href="javascript:;" v-show="isLike==1" @click="like(1)" ></a>
			  <b href="javascript:;" v-show="isLike==2"></b>
		  </div>
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio id="music" ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="showVideo">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="./jquery-3.1.1/jquery-3.1.1.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.2/FileSaver.js"></script>
  <script type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';
	
	
	// var mydata = JSON.parse(data); 
	// function createJson(prop, val) {
	//     // 如果 val 被忽略
	// 	var length = mydata.length
	//     if(typeof val === "undefined") {
	//         // 删除属性
	//         delete mydata[prop];
	//     }
	//     else {
	//         // 添加 或 修改
	//         delete mydata.push({"name":prop,"age":val});
	//     }
	// }
	// createJson('zyt',18)

	// console.log(mydata)



    // 实例化vue
    var app = new Vue({
      el: "#player",
      data: {
        // 搜索关键字
        query: '',
        // 歌曲列表
        musicList: [],
        // 歌曲url
        musicUrl: '',
        // 是否正在播放
        isPlay: false,
        // 歌曲热门评论
        hotComments: [],
        // 歌曲封面地址
        coverUrl: '',
        // 显示视频播放
        showVideo: false,
        // mv地址
        mvUrl: '',
		mvid:'',
		nowPlay:'',
		nowPlayid:'',
		username:sessionStorage.getItem('username'),
		userid:sessionStorage.getItem('userid'),
		likeLists:[],
		singer:"",
		isLike:0,
		musicIndex:0,
		isLikeList:-1,
		localhost:"localhost"
      },
	  //初始化
	  created(){
		  console.log('实例已经创建完成');
		  this.query = "少女时代";
		  this.searchMusic();
		  this.showlikes(1);
		  if(sessionStorage.getItem('userid')==null)
			window.location.href="quit.html";
	  },
      // 方法
      methods: {
        // 搜索歌曲
        searchMusic() {
          if (this.query == 0) {
            return
          }
          axios.get('/search?keywords=' + this.query).then(response => {
            // 保存内容
            this.musicList = response.data.result.songs;
			this.isLikeList = 0;
			console.log(this.musicList)

          })
		  //保存搜索
		  this.querys = this.query;
          // 清空搜索
          this.query = ''
        },
        // 播放歌曲
        playMusic(musicId,nowPlay,mvid,i) {
		  var that = this;
		  this.nowPlay = nowPlay;
		  this.nowPlayid = musicId;
		  this.mvid = mvid;
		  this.isLike = 1;
		  this.musicIndex = i;
		  for(var j = 0;j<this.likeLists.length;j++){
			  // console.log("this.likeLists[j].id=",this.likeLists[j].id);
			  if(this.likeLists[j].id == musicId){
				this.isLike = 2;
				break;
			  }
		  }
		  try{
			  this.singer = '--' + this.musicList[i].artists[0].name
		  }catch(err){
			  this.singer = '--' + this.musicList[i].artist;
		  }
	
		  //获取音乐控件
		  var music = document.getElementById('music');
		  music.addEventListener("timeupdate",function(){
				// console.log("播放",this.duration-this.currentTime);
				if(this.duration-this.currentTime < 0.3){
					var ni = that.musicIndex + 1;
					var nmusicId = that.musicList[ni+1].id;
					var nnowPlay = that.musicList[ni+1].name;
					var nmvid = that.musicList[ni+1].mvid;
					console.log("下一首");
					that.playMusic(nmusicId,nnowPlay,nmvid,ni);
				}
		  })
		  
		  console.log("this.singer:",this.singer);
          // 获取歌曲url
          axios.get('/song/url?id=' + musicId).then(response => {
            // 保存歌曲url地址
            this.musicUrl = response.data.data[0].url
          })
          // 获取歌曲热门评论
          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
            // console.log(response)
            // 保存热门评论
            this.hotComments = response.data.hotComments

          })
          // 获取歌曲封面
          axios.get('/song/detail?ids=' + musicId).then(response => {
            // console.log(response)
            // 设置封面
            this.coverUrl = response.data.songs[0].al.picUrl
          })

        },
        // audio的play事件
        play() {
          this.isPlay = true
          // 清空mv的信息
          this.mvUrl = ''
        },
        // audio的pause事件
        pause() {
          this.isPlay = false
        },
        // 播放mv
        playMv(vid) {
          if (vid) {
            this.showVideo = true;
            // 获取mv信息
            axios.get('/mv/url?id=' + vid).then(response => {
              // console.log(response)
              // 暂停歌曲播放
              this.$refs.audio.pause()
              // 获取mv地址
              this.mvUrl = response.data.data.url
            })
          }
        },
        // 关闭mv界面
        closeMv() {
          this.showVideo = false
          this.$refs.video.pause()
        },
        // 搜索历史记录中的歌曲
        historySearch(history) {
          this.query = history
          this.searchMusic()
          this.showHistory = false;
        },
		//退出登录
		quit(){
			sessionStorage.removeItem('username');
			sessionStorage.removeItem('userid');
			sessionStorage.removeItem('userpassword');
			window.location.href="quit.html";
		},
		//返回
		back(){
			console.log("返回");
			this.query = this.querys;
			this.searchMusic();
			this.isLikeList = 0;
		},
		//确认当前状态
		ff:function(road){
			var datas;
			//获取数据库数据
			$.ajax({
				type:'get',
				url:'http://'+this.localhost+':3306/'+road,
				async : false,
				data:{sql:'ff'},
				success:function(data){
					datas = data.data;
				},
				error:function(){
				console.log('error');
				}
			})
			return datas;
		},
		//查看收藏列表
		showlikes(flag){
			$.ajax({
				type:'get',
				url:'http://'+this.localhost+':3306/likes',
				async : false,
				data:{userid:this.userid,sql:'cz'},
				success:function(data){
					console.log(data.data);
				},
				error:function(){
				console.log('error');
				}
			})
			setTimeout(()=>{
				datas = this.ff("likes");
				this.likeLists = datas;
				if(flag == 0){
					this.musicList = datas;
					this.isLikeList = 1;
				}
				console.log("this.likeLists",this.likeLists);
			},1100)
		},
		//(取消)收藏歌曲
		like(flag){
			//收藏
			var that = this;
			if(flag==1){
				var datas;
				//获取数据库数据
				$.ajax({
					type:'get',
					url:'http://'+this.localhost+':3306/like',
					async : false,
					data:{userid:this.userid,musicid:this.nowPlayid,musicname:this.nowPlay,mvid:this.mvid,artist:this.singer,sql:'like'},
					success:function(data){
						datas = data;
						that.showlikes(1);
						that.isLike = 2;
					},
					error:function(){
					console.log('error');
					}
				})
			}
			//取消收藏
			else if(flag==0){
				var datas;
				//获取数据库数据
				$.ajax({
					type:'get',
					url:'http://'+this.localhost+':3306/like',
					async : false,
					data:{userid:this.userid,musicId:this.nowPlayid,musicname:this.nowPlay,sql:'like'},
					success:function(data){
						datas = data;
					},
					error:function(){
					console.log('error');
					}
				})
			}
		}
		
      },

    })

  </script>
</body>

</html>